<script setup>
import { ref, reactive, computed, onMounted } from 'vue';
const requireImage = (url) => {
  return new URL(url, import.meta.url).href
}
const props = defineProps({
  checkedNews: Object,
})
</script>
<template>
  <div class="detail-center">
    <div class="news-form">
      <div class="news-detail">
        <div class="detail-top">
          <p class="title">{{ checkedNews.title }}</p>
          <p class="clock">
            <img src="@/assets/images/clock.png" alt="">
            <span>{{ checkedNews.time }}</span>
          </p>
          <div class="detail-content" v-html="checkedNews.detail">

          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped lang='scss'>
.detail-center {
  .news-form {
    min-height: 1168px;
    width: 100%;
    background: #fff;

    .news-detail {
      max-width: 1200px;
      margin: 40px auto 0px;

      .detail-top {
        .title {
          font-weight: bold;
          font-size: 32px;
          color: #333;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .clock {
          display: flex;
          align-items: center;
          margin: 20px 0px;

          img {
            width: 16px;
            height: 16px;
            margin: 0px 8px 0px 0px;
          }

          span {
            font-size: 16px;
            color: #999999;
          }
        }

        .detail-content {
          border-top: 1px solid #E5E5E5;
          padding: 30px 0px 0px 0px;

          .image-wrapper {
            img {
              width: 100% !important;
            }
          }

          div {
            p {
              font-size: 16px;
              color: #666666;
              line-height: 28px;


            }
          }
        }
      }
    }


  }
}
</style>
<style lang='scss'>
.detail-content {
  .image-wrapper {
    img {
      width: 100% !important;
    }
  }

  div,
  p {
    font-size: 16px;
    color: #666666;
    line-height: 28px;
    margin: 30px 0px 0px 0px;
  }

}
</style>
